<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { login, getPhoneCaptcha } from '@/api/login'
  import { setToken } from '@/utils/auth'
  import { showToast } from 'vant';
  import { useRouter, useRoute } from 'vue-router';

  const loginLoading = ref(false)
  const router = useRouter()
  const route = useRoute()
  const routeQuery = ref({})

  onMounted(() => {
    init()
  })

  // 初始化
  const init = () => {
    const query = route.query
    routeQuery.value = query
    if (query) {
      query.ct_id && sessionStorage.setItem('ct_id', query.ct_id)
    }
  }

  // 发送验证码对象
  const captchaCode = reactive({
    text: '获取验证码',
    time: 60,
    isSend: false,
    timer: null
  })
  const handleGetCaptchCode = () => {
    const pattern = /^1[0-9]{10}$/
    if (pattern.test(phone.value)) {
      getPhoneCaptcha(phone.value).then(res => {
        showToast('发送成功')
        countdown()
      })
    } else {
      showToast('请输入正确的手机号码')
    }
  }

  // 执行倒计时
const countdown = () => {
  if (!captchaCode.isSend) {
    captchaCode.isSend = true
    captchaCode.timer = setInterval(() => {
      captchaCode.time--
      captchaCode.text = `还剩${captchaCode.time}秒`
      if (captchaCode.time == 0) {
        clearInterval(captchaCode.timer)
        captchaCode.text = `获取验证码`
        captchaCode.isSend = false
        captchaCode.time= 60
      }
    }, 1000)
  }
}

  // 执行登录操作
  const phone = ref('')
  const captcha_code = ref('')
  const handleLogin = () => {
    const { ct_id } = routeQuery.value
    if (!ct_id) {
      showToast('邀请链接缺少合同参数,请检查')
      return
    }
    const data = {
      phone: phone.value,
      captcha_code: captcha_code.value
    }
    if (data.phone && data.captcha_code) {
      loginLoading.value = true
      login(data).then(res => {
        showToast('登录成功')
        const { token, user } = res.data
        setToken(token)
        sessionStorage.setItem('userinfo', JSON.stringify(user))
        // 跳转首页
        goToHome()
      }).catch(err => {
        loginLoading.value = false
      })
    } else {
      showToast('请输入手机号码或者验证码')
    }
  }

  // 跳转首页
  const goToHome = () => {
    router.replace({ name: 'home' })
  }

</script>

<template>
  <div class="login-page">
    <div class="login-container">
      <div class="title">签约登录</div>
      <div class="login-form">
        <van-field 
          center 
          v-model="phone" 
          placeholder="请输入手机号码" 
          :border="false" 
          maxlength="11"
          type="tel"
          clearable
        >
          <template #left-icon>
            <van-icon name="phone" color="#ddd" />
          </template>
        </van-field>
        <van-field 
          center 
          v-model="captcha_code" 
          placeholder="请输入验证码" 
          :border="false"
          maxlength="4"
          type="digit"
          clearable
        >
          <template #left-icon>
            <van-icon name="comment" color="#ddd" />
          </template>
          <template #button>
            <van-button 
              size="small" 
              type="primary"
              @click="handleGetCaptchCode"
              :disabled="captchaCode.isSend"
            >{{captchaCode.text}}</van-button>
          </template>
        </van-field>
      </div>
      <div class="footer-container">
        <van-button 
          type="primary" 
          round 
          block 
          color="linear-gradient(to right, rgb(108 179 251), #1989fa)"
          class="submit-button"
          @click="handleLogin"
          :loading="loginLoading"
          loading-text="登录中..."
        >登录</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  position: relative;
}
.login-container {
  padding: 0 20px;
  margin: 0 auto;
  transform: translateY(100px);
  min-width: 320px;
}
@media (min-width: 1024px) {
  .login-page {
    background: #f8f8f8;
    height: 100vh;
  }
  .login-container {
    width: 375px;
    background: #fff;
    padding: 30px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 10px #ddd;
    border-radius: 5px;
  }
}
.title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
}
.login-form {
  margin-top: 50px;
  margin-bottom: 50px;
}
.van-field {
  background: #f8f8f8;
  padding: 15px 10px;
  margin-bottom: 10px;
  font-size: 16px;
}
.footer-container .van-button {
  box-shadow: 0px 3px 8px #81b6e0;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
}
.van-field__left-icon {
  color: #999 !important;
}
</style>